<template>
	
	<div>
		
		<transition
		  appear
		  appear-active-class="animate__animated animate__bounceInRight"
		  enter-active-class="animate__animated animate__bounceInRight"
		  leave-active-class="animate__animated animate__bounceOutRight"
		>
		
		<div  class="editor" v-show="isCodeEditor" >
			
			<div class="full-screen" @mousedown="mousedown" >
				<div class="full-screen-line"></div>
			</div>
			
			<div class="editor-drawer" >
				<div class="editor-drawer-header">
					<div class="editor-drawer-header ltl">
						<span>场景镜头</span>
					</div>
					<div class="editor-drawer-header rtl">
						<button class="code-run-btn" @click="runCode">运行</button>
						<button :class="codeRestbtn" @click="restCode">恢复</button>
					</div>
				</div>
				<div class="editor-drawer-body">
					<div class="editor-drawer-body content">
						<codemirror
						  v-model="code"
						  mode="htmlmixed"
						  placeholder=""
						  scrollbarStyle="null"
						  autoCloseBrackets=true
						  matchBrackets=true
						  showCursorWhenSelecting=true
						  autoCloseTags=true
						  :style="{ height:mirrorHeight + 'px'}"
						  :autofocus="true"
						  :indent-with-tab="true"
						  :tabSize="2"
						  :extensions="extensions"
						  :lineWrapping="true"
						  @ready="log('ready', $event)"
						  @change="log('change', $event)"
						  @focus="log('focus', $event)"
						  @blur="log('blur', $event)"
						/>
					</div>
					<div class="editor-drawer-body footer">
						<div class="log-header">
							<div class="log-info">Logs</div>
							<div class="Log-clear-btn" @click="clearLogs">清空</div>
							<div class="log-split-line"></div>
						</div>
						<div class="log-content">
							<ul>
								<li v-for="p in logRecords" class="log-li">
									<pre v-html="p"></pre>
								</li>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		</transition>
	</div>
</template>

<script setup lang="ts">
	
	import { Codemirror } from "vue-codemirror";
	import { javascript } from "@codemirror/lang-javascript";
	import { oneDark } from "@codemirror/theme-one-dark";
	import { ElMessage } from 'element-plus'
	import { ref} from "vue";

	const isCodeEditor=ref(false)
	const logRecords=ref([]);
	const codeRestbtn=ref('code-rest-btn disable');
	const code = ref();
	const extensions = [javascript(), oneDark];
	const mirrorHeight = ref(window.innerHeight-400-40);
	const defaultCode = ref();
	
	//json 格式化Html
	const syntaxHighlight=(json)=> {
		if (typeof json != 'string') {
			json = JSON.stringify(json, undefined, 2);
		}
		json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
		return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
			var cls = 'number';
			if (/^"/.test(match)) {
				if (/:$/.test(match)) {
					cls = 'key';
				} else {
					cls = 'string';
				}
			} else if (/true|false/.test(match)) {
				cls = 'boolean';
			} else if (/null/.test(match)) {
				cls = 'null';
			}
			return '<span class="' + cls + '">' + match + '</span>';
		});
	}
	
	const addLog = (e) => {
		if(logRecords.value.length>5){
			logRecords.value.unshift(syntaxHighlight(e));
			logRecords.value.pop()
		}else{
			logRecords.value.unshift(syntaxHighlight(e));
		}
	};
	
	const log=(type,e)=>{
		if('change'==type){
			if(defaultCode.value==code.value){
				codeRestbtn.value="code-rest-btn disable";
			}else{
				codeRestbtn.value="code-rest-btn";
			}
		}
	}
	
	const runCode = () => {
		try{
			
			if(code.value){
				eval(code.value);
			}
			else{
				ElMessage({
				    message: '执行内容空.',
				    type: 'warning',
				  })
			}
			
		}catch(e){
			ElMessage.error('执行异常.')
			console.error(e)
		}
	};
	
	const restCode = () => {
		code.value=defaultCode.value
		codeRestbtn.value="code-rest-btn disable";
	};
	
	
	const setCode = (e) => {
		defaultCode.value=e.content?e.content:'';
		code.value=e.content?e.content:'';
	};
	
	const show=(e)=>{
		isCodeEditor.value=e;
	}
	
	const clearLogs=()=>{
		logRecords.value=[];
	}
	
	const isDrag=ref(false);
	
	const mousedown=(e)=>{
		isDrag.value=true;
		
	}
	
	const mousemove=(e)=>{
		if(isDrag.value){
		}
	}
	
	const mouseup=(e)=>{
		isDrag.value=false;
	}
	
	onMounted(() => {
	});
	
	//暴露state和play方法
	defineExpose({
	  addLog,setCode,show,clearLogs,mousemove,mouseup
	});

</script>

<style  scoped>
	
	
	.editor{
		position: fixed;
		right: 0;
		top: 0;
		left: auto !important;
		height: 100vh;
		display: flex;
		flex-direction: column;
		width: calc(var(--size) + 12px);
		pointer-events: none;

		>.full-screen{
			cursor: ew-resize;
			width: 12px;
			background:var(--edit-color-color);
			height: 150px;
			position: absolute;
			top: calc(50% - 225px);
			padding-left: 6px;
			border: 1px solid #0f1619;
			pointer-events:auto; 
			z-index: 100;
			pointer-events: auto;           
			>.full-screen-line{
				right: 0;
				display: inline-block;
				top: calc(50% - 178px);
				width: 3px;
				height: 60px;
				border-radius: 3px;
				background: rgba(255,255,255,0.3);
				margin-top: 42px;
			}
		}
		>.editor-drawer{
		flex-grow: 1;
		box-sizing: border-box;
		background-color: var(--edit-color-color);
		overflow: hidden;
		height: 100%;
		top: 0;
		bottom: 0;
		border-left: 1px solid var(--edit-color-color);
		right: -1px;
		top: 0;
		left: auto !important;
		right: 0;
		position: absolute;
		width: calc(var(--size) + 0px);
		pointer-events: auto;  
		>.editor-drawer-header{
			color: #ffffff;
			display: flex;
			padding-bottom: 0;
			height: 2.5rem;
			flex-direction: row;
			padding-top: 8px;
			-moz-user-select:none; /* Firefox私有属性 */
			-webkit-user-select:none; /* WebKit内核私有属性 */
			-ms-user-select:none; /* IE私有属性(IE10及以后) */
			-khtml-user-select:none; /* Khtml内核私有属性 */
			-o-user-select:none; /* Opera私有属性 */
			user-select:none; /* CSS3属性 */
			
			>.editor-drawer-header.ltl{
				position: absolute;
				padding-left: 0.625rem;
				font-size: 0.75rem;
				padding-top: 0.3125rem;
			}
			
			>
			.editor-drawer-header.rtl{
				right: 0;
				position: absolute;
				margin-right: 79px;
				>.code-run-btn{
					width: 60px;
					height: 28px;
					background: #0ba0ff;
					border: none;
					color: #fff;
					margin-right: 0.625rem;
					cursor:pointer;
				}
				>.code-run-btn:hover{
					background: #25aeab;
				} 
				>.code-rest-btn{
					width: 60px;
					height: 28px;
					background: #EE7752;
					border: none;
					color: #fff;
					cursor:pointer;
				}
				>.code-rest-btn:hover{
				   background: #d56a49;
				}
				>.code-rest-btn.disable{
					background: #a19c9a;
					cursor:default;
				}
				
				>.code-rest-btn.disable:hover{
					background: #a19c9a;
					cursor:default;
				}
			}
		}
		>.editor-drawer-body{
			flex: 1;
			display: flex;
			flex-direction: column;
			
			>.editor-drawer-body.content{
				flex: 1;
				/deep/ .ͼo {
				    color: #abb2bf;
					background: var(--edit-color)
				}
				
				/deep/.ͼo .cm-gutters {
					background-color:  var(--editor-color);
					color: #7d8799;
					border: none;
				}
				/deep/.ͼ4 .cm-line {
				    caret-color: var(--edit-blue) !important;
				}
				
				/deep/.ͼo .cm-content {
				    caret-color: var(--edit-blue);
				}
				
				/deep/.CodeMirror-wrap pre.CodeMirror-line, /deep/.CodeMirror-wrap pre.CodeMirror-line-like {
				     word-wrap: break-word; 
				    white-space: pre-wrap;
				    word-break: normal;
				}
				
				/deep/.cm-line{
					width: calc(var(--size) - 35px);
				}
				
				/deep/.cm-line span{
				    word-wrap: break-word;
				    white-space: pre-wrap;
				    word-break: normal;
				}
				
			}
			>.editor-drawer-body.footer{
				bottom: 0;
				height: 25rem;
				display: flex;
				flex-direction: column;
				
				>.log-header{
					height: 2.1875rem;
					padding: 0.625rem;
					-moz-user-select:none; /* Firefox私有属性 */
					-webkit-user-select:none; /* WebKit内核私有属性 */
					-ms-user-select:none; /* IE私有属性(IE10及以后) */
					-khtml-user-select:none; /* Khtml内核私有属性 */
					-o-user-select:none; /* Opera私有属性 */
					user-select:none; /* CSS3属性 */
					
					>.log-info{
						color:rgba(255,255,255,0.6); float: left;font-size: 12px;
					}
					>.Log-clear-btn{
						color:rgba(255,255,255,0.6); 
						float: right;
						cursor:pointer;
						font-size: 13px;
					}
					>.log-split-line{
						height: 1px;background:rgba(255,255,255,0.2);margin-bottom: 0px;display: block;margin-top: 24px;
					}
				}
				>.log-content{
					flex: 1;
					color: white;
					padding: 0.3125rem;
					overflow-y: auto;
					background: var(--edit-color);
					.log-li{
						border-bottom: 1px solid rgba(255,255,255,0.2);
					}
				}
				
			}
		}
	}
	}
	
</style>